<template>
	<view>
		<u-popup :show="showfalg" mode="center">
			<view style="font-size: 24rpx;padding-bottom: 20rpx;">
				<view class="u-flex u-flex-between title">
					<view class="">
						安全验证
					</view>
					<u-icon name="close" @click="closetap"></u-icon>
				</view>
				<view class="" style="margin: 20rpx;position: relative;overflow: hidden;">
					<u--image :showLoading="true" :src="originalImageBase64" width="660rpx" height="310rpx"></u--image>
					<view class="jigsawImage" :style="[imgstyle]">
						<u--image :showLoading="true" :src="jigsawImageBase64" width="50px" height="310rpx"></u--image>
					</view>
				</view>
				<view class="">
					<!-- {{value}} -->
					<u-slider-yzm v-model="value" @change="change"></u-slider-yzm>
				</view>
			</view>
		</u-popup>


	</view>
</template>

<script>
	import qs from "qs"
	export default {
		data() {
			return {
				showfalg: false,
				jigsawImageBase64: "",
				originalImageBase64: "",
				value: "0",
				secretKey: "",
				token: ""
			}
		},
		computed: {
			imgstyle() {
				return {
					left: `${this.value}%`
				}
			}
		},
		methods: {
			async show() {
				this.value = "0"
				this.showfalg = true
				let data = await this.$z.request("/code/create", "", "get");
				this.jigsawImageBase64 = 'data:image/png;base64,' + data.data.repData.jigsawImageBase64
				this.originalImageBase64 = 'data:image/png;base64,' + data.data.repData.originalImageBase64
				this.secretKey = data.data.repData.secretKey
				this.token = data.data.repData.token
			},
			closetap() {
				this.showfalg = false
			},
			async change() {
				var moveLeftDistance = (this.value * 305 / 100);
				console.log(JSON.stringify({
					x: moveLeftDistance,
					y: 5.0,
				}), this.secretKey);
				let reqdata = {
					captchaType: "blockPuzzle",
					pointJson: this.$z.ase(JSON.stringify({
						x: moveLeftDistance,
						y: 5.0,
					}), this.secretKey),
					token: this.token
				}
				// reqdata = {
				// 	captchaType: "blockPuzzle",
				// 	pointJson: "KrDEoCpN88nloJGZu3hctLgCGqcfU96Gh25HP9NPkKw=",
				// 	token: "d9bf74cbbd8e4182afe1d3a63539c81b"
				// }
				try {
					let data = await this.$z.request(
						`/code/check?${qs.stringify(reqdata)}`, {}, "POST")
					data = data.data
					if (data.repCode == "0000") {
						var captchaVerification = this.$z.ase(
							this.token +
							'---' + JSON.stringify({
								x: moveLeftDistance,
								y: 5.0,
							}), this.secretKey)
						this.$emit("success", {
							captchaVerification: captchaVerification
						})
						this.showfalg = false
						console.log(captchaVerification);
					} else {
						uni.$u.toast("验证失败")
						this.show();
					}

				} catch (e) {
					//TODO handle the exception
					uni.$u.toast("验证失败")
					this.show();
				}

				console.log(moveLeftDistance, data.repMsg);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		height: 80rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.jigsawImage {
		position: absolute;
		top: 0;
		left: 0;
	}
</style>